<template>
    <link rel="stylesheet" href="/assets/css/coupon.css" />
    <!-- 顶部标题 -->
    <van-sticky>
      <van-nav-bar
        title="优惠券活动列表"
        left-text="返回"
        left-arrow
        @click-left="onBack"
      />
    </van-sticky>
    <!-- <div class="clear"></div>
    <div class="h30"></div> -->
  
    <div class="coupon_list">
      <div class="coupon_item" v-for="item in couponList">
        <div class="item_content">
          <!-- 声明式导航传递参数,写一个对象-->
          <router-link :to="{ path: 'info', query: { id: item.id } }">
            <div class="left">{{ item.rate * 100 }}<span>折</span></div>
            <div class="right">
              <div>{{ item.title }}</div>
              <div>
                订单满<span>100元</span>打<span>{{ item.rate * 100 }}折</span>
              </div>
              <div>每人限领1张</div>
              <div>
                领取后{{
                  parseInt((item.endtime - item.createtime) / (60 * 60 * 24))
                }}天内有效
              </div>
            </div>
          </router-link>
        </div>
        <div class="item_btn">
          <router-link class="right_btn" :to="'info?id=' + item.id"
            >优惠详情</router-link
          >
        </div>
      </div>
    </div>
  </template>
  <script setup>
  import { getCurrentInstance, onBeforeMount } from "vue";
  
  const { proxy } = getCurrentInstance();
  
  // 定义优惠券列表接收返回的数据
  const couponList = ref([]);
  
  // 挂载组件前发起请求
  onBeforeMount(async () => {
    let result = await proxy.$post({
      url: "coupon/coupon/index",
    });
    if (result.code === 1) {
      couponList.value = result.data;
    } else {
      proxy.$warnNotify(result.msg);
      return false;
    }
  });
  // 返回上一级
  const onBack = () => {
    proxy.$router.back();
  };
  </script>